<template>
  <div class="category-container">
    <div id="category-header" class="category-header">
      <svg-icon style="margin-right: 18px;" icon-class="type" size="18"></svg-icon>
      数据商品分类
    </div>
    <div id="category-content" class="category-content" :style="{height}" :class="{'float':float}">
      <template v-for="(item,index) in treeData">
        <!--        v-if="item.children&&item.children.length>0"-->
        <div :id="'type-'+index" class="type-item">
          <div class="item-left">
            <div class="item-header">
              <img v-if="item.fileUrl" :src="item.fileUrl" width="18px" height="18px"/>
              <svg-icon v-else icon-class="type_1" size="18"></svg-icon>
              <span>{{ item.name }}</span>
            </div>
            <div
              style="display: flex;white-space: nowrap;overflow: hidden;width: 180px;margin-top: 14px;margin-left: 38px;">
              <template v-for="(sub,subIndex) in item.children">
                <div class="item-content" @click="toList(sub.id)">
                  {{ sub.name }}
                </div>
              </template>
            </div>
          </div>
          <div style="line-height: 80px;padding-right: 20px;">
            <a-icon type="right" style="color: #CCCCCC;"/>
          </div>
          <div :id="'block-'+index" class="block"></div>
        </div>
      </template>
    </div>
    <div class="category-detail" id="category-detail">
      <div class="category-child" v-for="item in displayCategory" :key="item.id">
        <div @click="toList(item.id)">{{ item.name }}</div>
        <div>{{ item.remark }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import {queryGoodsType} from '@/api/goods/type'
import $ from 'jquery'

function removeClass (el, className) {
  if (!hasClass(el, className)) {
    return
  }
  const newClass = el.className.split(' ')
  const index = newClass.findIndex(item => item === className)
  newClass.splice(index, 1)
  el.className = newClass.join(' ')
}

function addClass (el, className) {
  if (hasClass(el, className)) {
    return
  }
  const newClass = el.className.split(' ')
  newClass.push(className)
  el.className = newClass.join(' ')
}

function hasClass (el, className) {
  const reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
  return reg.test(el.className)
}

export default {
  name: 'Type',
  data () {
    return {
      // treeData: [],
      activeIndex: 0
    }
  },
  props: {
    float: {
      type: Boolean,
      default: false
    },
    height:{
      type: String,
      default: '404px'
    },
    treeData: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    treeData: {
      handler (newVal) {
        if (newVal && newVal.length > 0) {
          this.$nextTick(() => {
            this.hoverEvent()
          })
        }
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    displayCategory () {
      return this.treeData.length > 0 ? this.treeData[this.activeIndex].children : []
    }
  },
  mounted () {
    this.$nextTick(() => {
      const ele = document.getElementById('category-header')
      const content = document.getElementById('category-content')
      ele.addEventListener('mouseover', function () {
        addClass(content, 'show')
      })
      ele.addEventListener('mouseout', function () {
        removeClass(content, 'show')
      })
      content.addEventListener('mouseover', function () {
        addClass(content, 'show')
      })
      content.addEventListener('mouseout', function () {
        removeClass(content, 'show')
      })
    })
  },
  methods: {
    toList (id) {
      if (this.$route.name === 'goodsList') {
        this.$emit('change', id)
      } else {
        this.$router.push({
          path: '/goodsList',
          query: {
            type: id
          }
        })
      }
    },
    hoverEvent () {
      const that = this
      $('.type-item').mouseenter(function () {
        const $this = $(this)
        $this.addClass('active')
        $this.siblings().removeClass('active')
        that.activeIndex = $this.index()
        if (!$('#category-detail').hasClass('show')) {
          $('#category-detail').addClass('show')
        }
        if (!$('#block-' + that.activeIndex).hasClass('show')) {
          $('#block-' + that.activeIndex).addClass('show')
        }
      }).mouseleave(function () {
        $(this).removeClass('active')
        $(this).siblings().removeClass('active')
        if ($('#category-detail').hasClass('show')) {
          $('#category-detail').removeClass('show')
        }
        if ($('#block-' + that.activeIndex).hasClass('show')) {
          $('#block-' + that.activeIndex).removeClass('show')
        }
      })
      $('#category-detail').mouseenter(function () {
        $(this).addClass('show')
        if (!$('.type-item').eq(that.activeIndex).hasClass('active')) {
          $('.type-item').eq(that.activeIndex).addClass('active')
        }
        if (!$('#block-' + that.activeIndex).hasClass('show')) {
          $('#block-' + that.activeIndex).addClass('show')
        }
        if (that.float && !$('#category-content').hasClass('show')) {
          $('#category-content').addClass('show')
        }
      }).mouseleave(function () {
        $(this).removeClass('show')
        if ($('.type-item').eq(that.activeIndex).hasClass('active')) {
          $('.type-item').eq(that.activeIndex).removeClass('active')
        }
        if ($('#block-' + that.activeIndex).hasClass('show')) {
          $('#block-' + that.activeIndex).removeClass('show')
        }
        if (that.float && $('#category-content').hasClass('show')) {
          $('#category-content').removeClass('show')
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
$mainColor: #3370FF;
.category-container {
  width: 280px;
  position: relative;
}

.category-header {
  width: 280px;
  height: 46px;
  line-height: 46px;
  padding-left: 20px;
  border-radius: 10px 10px 0 0;
  background-image: linear-gradient(to left, #58A5FF, #0078FE);
  font-size: 16px;
  color: white;
  font-family: PingFangSC-Semibold, sans-serif;
  cursor: pointer;
}

.category-content {
  height: 404px;
  background: #FFFFFF;
  box-shadow: 0 0 10px 0 rgba(0, 120, 254, 0.1);
  border-radius: 0 0 10px 10px;
  position: relative;

  &.float {
    position: absolute;
    top: 46px;
    width: 280px;
    display: none;
    z-index: 999;

    &.show {
      display: block;
    }
  }
}

.type-item {
  height: 80px;
  display: flex;
  border-bottom: 1px dashed #E2E2E2;
  z-index: 999;
  position: relative;

  &:last-child {
    border-bottom: none;
  }

  &.active {
    background: white;
    box-shadow: 0 0 10px 0 rgba(0, 120, 254, 0.2);
  }

  .block {
    width: 10px;
    position: absolute;
    left: 280px;
    height: 80px;
    display: none;
    background: white;

    &.show {
      display: block;
    }
  }

  .item-left {
    flex: 1;
    margin-right: 16px;
    width: 0;
    margin-left: 20px;

    .item-header {
      line-height: 18px;
      margin-top: 18px;

      span {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC, sans-serif;
        font-weight: 500;
        color: #323232;
        margin-left: 16px;
      }
    }

    .item-content {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      color: #646464;
      margin-right: 20px;
      cursor: pointer;

      &:hover {
        color: $mainColor;
      }
    }
  }
}

.category-detail {
  width: 920px;
  position: absolute;
  top: 46px;
  left: 280px;
  background: white;
  height: 404px;
  z-index: 998;
  display: none;
  flex-wrap: wrap;
  padding: 30px;
  padding-top: 10px;
  border-radius: 0 10px 10px 0;
  box-shadow: 0px 0px 10px rgba(0, 120, 254, 0.2);

  &.show {
    display: flex;
  }

  .category-child {
    width: calc((100% - 60px) / 2);
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC, sans-serif;
    font-weight: 400;
    color: #323232;
    border-bottom: 1px dotted #e2e2e2;
    margin-top: 20px;

    div:first-child {
      line-height: 30px;
      padding-bottom: 4px;
      cursor: pointer;

      &:hover {
        color: $mainColor;
      }
    }

    div:last-child {
      font-size: 12px;
      color: #646464;
      line-height: 17px;
      word-break: break-all;
    }

    &:nth-child(2n+1) {
      margin-right: 60px;
    }
  }
}
</style>
